import { message,Table,Space,Button,Tooltip,Popconfirm,Modal,Form,Input } from "antd"
import { EditFilled,DeleteFilled,PlusOutlined } from '@ant-design/icons'
import './KeywordTable.css'
import fetch from "./fetch"
import { useEffect, useState } from "react"

function KeywordTable(){
    const [editModelVisiable,seteditModelVisiable] = useState(false)
    const [createModelVisiable,setCreateModelVisiable] = useState(false)
    const [currentEditId,setCurrentEditId] = useState("")
    const [keywordList,setKeyWordList] = useState([])

    const deleteKeyword = async (id) => {
        console.log(id)
        try {
            await fetch('/keyword/'+id,'delete')
        } catch (error) {
            message.error('删除失败')
        }
    }

    const addKeyword = async (data) => {
        console.log(data)
        try {
            await fetch('/keyword','post',data)
            message.success('创建成功');
        } catch (error) {
            message.error('创建失败')
        }
        
    }

    const updateKeyword = async (id,data) => {
        console.log(id)
        try {
            await fetch('/keyword/'+id,'put',data)
            message.success('修改成功');
        } catch (error) {
            message.error('修改失败')
        }
        
    }

    const getKeywordList = async () => {
        const result = await fetch("/keyword/list",'get')
        result && setKeyWordList(JSON.parse(result))
    }
    
    useEffect(() => {
        getKeywordList()
    },[])

    const [editForm] = Form.useForm()
    const [createForm] = Form.useForm()
    const { Column } = Table
    return (
        <div className="mainTableDiv">
            <div className="createButtonDiv">
            <Button
                className="createButton"
                type="primary"
                shape="round"
                icon={<PlusOutlined />}
                onClick={() => {
                    createForm.resetFields()
                    setCreateModelVisiable(true)
                }}
            >新建关键词</Button>
            </div>
            
            <Table dataSource={keywordList} pagination={false} narowKey="id">
            <Column title="关键词" dataIndex="keyword" key="keyword" />
            <Column title="触发回复" dataIndex="reply" key="reply" />
            <Column
                title="操作"
                key="action"
                render={(text, record) => (
                    <Space size="middle">
                        <Tooltip title="编辑">
                            <Button 
                                shape="circle"
                                icon={
                                    <EditFilled/>
                                }
                                onClick={() => {
                                    editForm.resetFields();
                                    setCurrentEditId(record?.id)
                                    seteditModelVisiable(true)
                                }}
                            />
                        </Tooltip>
                        <Tooltip title="删除">
                            <Popconfirm
                                title="确认要删除吗"
                                okText="是"
                                cancelText="否"
                                onConfirm={() => {
                                    deleteKeyword(record?.id)           
                                    setTimeout(() => {
                                        getKeywordList()
                                    }
                                    ,500)
                                }}
                            >
                                <Button 
                                    shape="circle"
                                    icon={
                                        <DeleteFilled/>
                                    }

                                />
                            </Popconfirm>
                        </Tooltip>
                        
                    </Space>
                )}/>
        </Table>
        <Modal
            title="新建关键词"
            visible={createModelVisiable}
            footer={null}
            onCancel={() => {
                setCreateModelVisiable(false)
            }}
        >
            <Form
                form={createForm}
                name="basic"
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 16 }}
                onFinish={() => {
                    setCreateModelVisiable(false)
                }}
                >
                <Form.Item
                    label="关键词"
                    name="keyword"
                    rules={[{ required: true, message: '请输入关键词' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="触发回复"
                    name="reply"
                    rules={[{ required: true, message: '请输入回复' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" onClick={() => {
                        addKeyword(createForm.getFieldsValue(true))
                        setCreateModelVisiable(false)
                        setTimeout(() => {
                            getKeywordList()
                        }
                        ,500)
                    }}>
                    确认
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
        <Modal
            title="修改关键词"
            visible={editModelVisiable}
            footer={null}
            onCancel={() => {
                seteditModelVisiable(false)
            }}
        >
            <Form
                form={editForm}
                name="basic"
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 16 }}
                onFinish={() => {
                    seteditModelVisiable(false)
                }}
                >
                <Form.Item
                    label="关键词"
                    name="keyword"
                    rules={[{ required: true, message: '请输入关键词' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="触发回复"
                    name="reply"
                    rules={[{ required: true, message: '请输入回复' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" onClick={() => {
                        console.log(currentEditId)
                        updateKeyword(currentEditId,editForm.getFieldsValue(true))
                        seteditModelVisiable(false)
                        setTimeout(() => {
                            getKeywordList()
                        }
                        ,500)
                    }}>
                    确认
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
        </div>
      );
}

export default KeywordTable